iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
0
自我挑戰組

TypeScript 學習之路並實現 Gof 23 Design Pattern系列 第 14

TypeScript - Gof 23 Design Pattern (14):Observer Pattern

  • 分享至 

  • xImage
  •  

前言

今天是慵懶的星期日,除了趕進度外應該來去曬曬太陽。

Observer Pattern


說明

昨天寫State Pattern時突然想到聊天平台的架構,為了達到RealTime而使用Socketio,而Socketio就是透過每秒一直確定是否有更新達到RealTime,那今天Observer Pattern有異曲同工之妙? 但差別在於主動提供是否更新的資訊,但在伺服器端可能會造成伺服器附和很大吧?所以才採用客戶端自己去請求是否更新,也可能是瀏覽器限制等等..

範例

首先是Subject,類似伺服器端的概念,有著一串的使用者,可以通知使用者要更新囉!

//subject.ts

import {Person} from './Person';
import {Observer} from './Observer';

export class Subject{
    private list:Observer[] =[]; //有一array存使用者
    private state:string; //狀態暫時用string存
    
    constructor(){
        
    }
    attach(p:Observer):void{ //使用者可註冊進伺服器
        this.list.push(p); //推入陣列中
    }
    setState(m){ //變更目前狀態資訊 
        this.state = m; 
        this.notifyAll(); //變更會一並通知所有人
    }

    getState():string{
        return this.state; //取得現在狀態資訊
    }

    notifyAll(){ //通知所有人
        this.list.forEach(function (p) {
            p.Update(); //foreach每一使用者告知他狀態有被更新,請來取最新狀態。
        }); 
    }
}

為何不直接把最新狀態丟過去使用者呢?原因就是也許使用者已經掛了,或是並不需要更新,以致如果我們直接推送,會浪費很多資源,且一定很慢,每個都要傳送.. 所以用我發佈更新,看大家是不是還活著,要更新的自己來拿。

建一介面,來規範Observer

//Observer.ts
import {Subject} from './Subject';

export interface Observer{
    subject:Subject;
    Update():void;
}
//Person.ts
import {Observer} from './Observer';
import {Subject} from './Subject';
//Person實作Observer
export class Person implements Observer{
    name:string;  //名字
    subject:Subject;    //Subject
    constructor(n,sub){ //建構時綁入名字與subject
        this.name = n;
        this.subject = sub;
        this.subject.attach(this); //雙向綁起來 妳知道我 我知道你
    }
    Update():void{ //當被subject通知更新時,會執行以下方法
        console.log(this.name+": get Updating...");
        console.log(this.name+": get New State...");
        console.log(this.name+": New State: "+this.subject.getState());//並自行去取得最新狀態
    }
}

以下Demo就可以依序看到更新狀態以及個別訊息。

Demo.ts
import {Person} from './Person';
import {Observer} from './Observer';
import {Subject} from './Subject';

let subject:Subject = new Subject();
let amy:Observer = new Person('Amy',subject);
let jack:Observer = new Person('Jack',subject);
let peter:Observer = new Person('Pater',subject);

subject.setState('fuck');

結論

Observer Pattern讓我又想來規劃一聊天的平台,順便整合最近所學的,Travis-ci、Webpack、等等方便工具以及Typescript寫法,雖然說真的我覺得Typescript寫前端不套框架我還沒有想到比較好寫的方法,模組化時return html這樣組成一網頁嗎,感覺直接用框架似乎比較優?還沒有特別研究。

參考

Design Patterns - Observer Pattern


上一篇
TypeScript - Gof 23 Design Pattern (13):State Pattern
下一篇
TypeScript - Gof 23 Design Pattern (15):Composite Pattern
系列文
TypeScript 學習之路並實現 Gof 23 Design Pattern30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言